import React from 'react'

// 导入静态图  和 动图
import defaultImage from '../../assets/image/发射.jpg'
import sendImage from '../../assets/image/发射.gif'
import {connect} from 'react-redux'

 class Boy extends React.Component{
    state={
        isSend : false
    }
    handleClick = ()=>{
        let {isSend} = this.state
        // if(isSend){
        //     // 停止发送爱心
        //     this.props.stopLove()
        // }else{
        //     // 开始发送爱心
        //     this.props.sendLove()
        // }

        isSend ? this.props.stopLove() : this.props.sendLove()

        this.setState({
            isSend:!isSend
        })
    }

    render(){
        return (
            <div className='boySend'>
                <img src={this.state.isSend ? sendImage : defaultImage} className='boyImg'></img>
                <button onClick={this.handleClick}>{this.state.isSend ? '停止发射' : '发射爱心'}</button>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch)=>{
    // 要有一个返回值，这个对象会返回到组件的内部，可以通过this.props 来拿到
    return {
        sendLove: ()=>{
            dispatch({
                type:'send_love'
            })
        },
        stopLove:()=>{
            dispatch({
                type:'stop_love'
            })
        }
    }
}

export default connect(null,mapDispatchToProps)(Boy)